import { FC } from "react";
import QuestionInputConfig, { QuestionInputType } from "./questionInput/config";
import QuestionTitleConfig, { QuestionTitleType } from "./questionTitle/config";
import QuestionParagraphConfig, { QuestionParagraphType } from "./questionParagraph/config";
import QuestionInfoConfig, { QuestionInfoType } from "./questionInfo/config";
import QuestionTextareaConfig, { QuestionTextareaType } from "./questionTextarea/config";
import QuestionRadioConfig, { QuestionRadioType, QuestionRadioStatType } from "./questionRadio/config";
import QuestionCheckboxConfig, { QuestionCheckboxType, QuestionCheckboxStatType } from "./questionCheckbox/config";

// 汇总各个组件的prop type

export type ComponentValueType = QuestionInputType &
  QuestionTitleType &
  QuestionParagraphType &
  QuestionInfoType &
  QuestionTextareaType &
  QuestionRadioType &
  QuestionCheckboxType;

//汇总图表组件的prop type
export type StatValueType = QuestionCheckboxStatType & QuestionRadioStatType;

//统一组件的配置

export type ComponentConfigType = {
  title: string;
  type: string;
  PropsComponent: FC<ComponentValueType>;
  //属性组件
  Component: FC<ComponentValueType>;
  defaultValue: ComponentValueType;
  //图表组件
  StatComponent?: FC<{ list: StatValueType[] }>;
};

//全部组件的配置列表
const componentConfigList: ComponentConfigType[] = [
  QuestionInputConfig,
  QuestionTitleConfig,
  QuestionParagraphConfig,
  QuestionInfoConfig,
  QuestionTextareaConfig,
  QuestionRadioConfig,
  QuestionCheckboxConfig,
];

export function getComponentConfigByType(type: string) {
  return componentConfigList.find((c) => {
    return c.type === type;
  });
}

//组件分类
export const componentConfigGroup = [
  {
    groupName: "文本显示",
    components: [QuestionInfoConfig, QuestionTitleConfig, QuestionParagraphConfig],
  },
  {
    groupName: "用户输入",
    components: [QuestionInputConfig, QuestionTextareaConfig],
  },
  {
    groupName: "用户选择",
    components: [QuestionRadioConfig, QuestionCheckboxConfig],
  },
];
